<template>
  <div class="intro-setup clearfix">
    <n-button @click="handleStart" type="success">
      开始
    </n-button>
    <n-button class="setup-1" type="success">
      1
    </n-button>
    <n-button class="setup-2" type="success">
      2
    </n-button>
  </div>
</template>

<script setup name="IntroSetup">
import intro from 'intro.js';
import 'intro.js/minified/introjs.min.css';

const handleStart = () => {
  intro()
    // .onbeforeexit(function () {
    //   return confirm("Are you sure?");
    // })
    .setOptions({
      prevLabel: '上一步',
      nextLabel: '下一步',
      skipLabel: '跳过',
      doneLabel: '完成',
      steps: [
        {
          title: 'Welcome',
          intro: 'Hello World! 👋',
        },
        {
          title: 'Collapse Button',
          element: document.querySelector(`.setup-1`),
          intro: 'This is the menu collapse button.',
        },
        {
          title: 'User Action',
          element: document.querySelector(`.setup-2`),
          intro: 'This is the user function area.',
        },
      ],
    })
    .oncomplete(() => {
      // 点击结束按钮后执行的事件
      console.log('oncomplete');
    })
    .onexit(() => {
      // 点击跳过按钮后执行的事件
      console.log('onexit');
    })
    // .onbeforeexit(() => {
    //   // 确认完毕之后执行的事件
    //   return confirm('Are you sure?')
    // })
    .start();
}
</script>

<style lang="scss" scoped>
.intro-setup {
  position: relative;
  width: 100%;
  height: 300px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.886);
}
.setup-1 {
  position: absolute;
  top: 250px;
  left: 80px;
}
.setup-2 {
  position: absolute;
  top: 250px;
  right: 80px;
}
</style>